<template>
	<view class="lottery-card-item">
		
		<view v-if="issel" @click="tabsel(details,mkey,number)" style="width: 203rpx;z-index: 5;
		height: 269rpx;position: absolute;top:20px;display: flex;left:15px;">
		
			<view style="border-radius:50%;width: 25rpx;border:1px solid #a084f0;
			height: 25rpx;margin-top:17px;display: flex;justify-content: center;align-items: center;">
				<view  :class="details.isdisabled?'active':''" style="width: 16rpx;height: 16rpx;border-radius:16rpx;"></view>
			</view>
		</view>
		
		<view class="special-card" v-if="type == 8" :class="details.isdisabled?'vssfilter':''">
			<view class="masks">
				<image class="lottery-bg "  :src="mysterious_img" mode="widthFix" />
				<view class="shadows">
					<image :src="details.goods_image" mode="widthFix" :alt="details.goods_name" />
				</view>

				<view class="unknown"> ? </view>
			</view>

			<view class="front">
				<image class="lottery-bg "  :src="typeList[8].bg" mode="widthFix" />
				<view class="lottery-content-item">
					<image :hidden="!showStatus || !show" class="cover-lottery"  :src="details.goods_image"
						mode="widthFix" :alt="details.goods_name" />
					<view class="unknown" v-if="!show"> ? </view>
					<view class="lottery-name-item nowrap_ellipsis" v-else>
						{{ details.goods_name }}
					</view>
				</view>
				<!-- 奖品 标签 名 -->
				<view class="type-name">
					<image class="type-tag" :src="typeList[type].tag" />

					<view class="text-name yfs-tag" :class="typeList[type].tagClass">
						<text class="">
							{{ details.reward_name }}
						</text>
						赏
					</view>

				</view>
			</view>
			<view class="front fol">
				<image class="lottery-bg "  :src="typeList[8].bg" mode="widthFix" />

				<view class="lottery-content-item">
					<image :hidden="!showStatus || !show" class="cover-lottery" :src="details.goods_image"
						mode="widthFix" lazy-load :alt="details.goods_name" @load="imgLoad" />
					<view class="unknown" v-if="!show"> ? </view>
					<view class="lottery-name-item nowrap_ellipsis" v-else>
						{{ details.goods_name }}
					</view>
				</view>
				<!-- 奖品 标签 名 -->
				<view class="type-name">
					<image class="type-tag" :src="typeList[type].tag" />

					<view class="text-name yfs-tag" :class="typeList[type].tagClass">
						<text class="">3
							{{ details.reward_name }}
						</text>
						赏
					</view>
				</view>
			</view>
			<view class="flash-border" v-if="flashImg.status">
				<img class="the-flash" :src="flashImg.url" />
			</view>
		</view>

		<view class="group-card" v-else :class="details.isdisabled?'vssfilter':''">
			<image class="lottery-bg "  :src="typeList[type].bg" mode="widthFix" />
			<view class="lottery-content-item">
				<image :hidden="!(showStatus && show)" class="cover-lottery" :src="details.goods_image" mode="widthFix"
					lazy-load="false" :alt="details.goods_name" @load="imgLoad" />
				<!-- <view class="unknown" v-if="!(showStatus && show)"> ? </view> -->
				<!-- history -->
				<view class="lottery-name-item nowrap_ellipsis">
					{{ details.goods_name }}
				</view>
			</view>
			<!-- 奖品 标签 名 -->
			<view class="type-name">
				<image class="type-tag" :src="typeList[type].tag" />

				<view class="text-name yfs-tag" :class="typeList[type].tagClass">
					<text class="">
						{{ details.reward_name }}
					</text>
					赏
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		DRAW_MASKED,
		DRAW_TYPE
	} from '../portrait/portait_config';
	export default {
		// 建议 创建每个组件时 都添加name属性 标识组件名称
		name: '',
		components: {},
		props: {
			// show: {
			//   type: Boolean,
			//   default: false,
			// },
			issel:{
				type:Boolean,
				default: false,
			},
			mkey:{
				type: [String, Number],
				default: 0,
			},
			number: {
				type: [String, Number],
				default: 0,
			},
			type: {
				type: [String, Number],
				default: '6',
			},
			details: {
				type: Object,
				default: () => ({}),
			},
			cover: {
				type: String,
				default: '',
			},
		},
		data: () => ({
			tindex:-1,
			showStatus: false,
			show: false,
			mysterious_img: DRAW_MASKED,

			//闪电动画
			flashImg: {
				status: false,
				url: '',
				count: 0,
			},
			//  赏类型
			typeList: DRAW_TYPE,
		}),
		// 计算属性 适配者模式
		computed: {},
		// 数据监听
		watch: {},
		/**
		 * 生命周期 类似 发布订阅者模式
		 * 在实例初始化之前被调用
		 */
		beforeCreate() {},
		// 在实例创建完成后被立即调用
		created() {
			let constant = 0.4;
			let time = constant ** 2 * 100 * this.number ** 2 + constant * 100 + 2000;
			if (this.type == 8) {
				this.loadingFlashImg();
			}
			setTimeout(() => {
				this.show = true;
			}, time);
		},
		// 在挂载开始之前被调用
		beforeMount() {},
		// 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
		mounted() {},
		// 数据更新时调用，发生在虚拟 DOM 打补丁之前
		beforeUpdate() {},
		// 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
		updated() {},
		// 实例销毁之前调用。在这一步，实例仍然完全可用
		beforeDestroy() {},
		// Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
		destroyed() {},
		methods: {
			tabsel(item,index,number){
				 this.$emit('tabsel',index,item)
			},
			imgLoad() {
				this.showStatus = true;
			},

			// 抽奖动画加载
			loadingFlashImg() {
				const fn = () => {
					uni.getImageInfo({
						src: this.$IMG_URL +
							'/uploads/20230427/b9a4f7dca62b1c5e204ce05c0abfc6f1.png',
						success: (result) => {
							this.flashImg = {
								status: true,
								url: result.path,
								count: this.flashImg.count,
							};
						},
						fail: () => {
							if (this.flashImg.count == 3) {
								return;
							} else {
								this.flashImg.count = this.flashImg.count + 1;
								fn();
							}
						},
					});
				};
				fn();
			},
		},
	};
</script>
<style lang="scss" scoped>
	@import 'static/style/prize.scss';

	view,
	image {
		max-width: none;
	}

	.lottery-card-item {
		position: relative;
		width: 203rpx;
		height: 269rpx;
		// overflow: hidden;
		--timing: 0.4s;
		transform: scale(1.2);

		.type-name {
			position: absolute;
			top: 38rpx;
			left: 16rpx;
			width: 65rpx;
			height: 31rpx;

			.text-name {
				position: relative;
				z-index: 1;
				left: -2rpx;
				width: 100%;
				height: 100%;
				font-size: 16rpx;
				color: #fff;
				text-align: center;
				line-height: 31rpx;
				font-weight: 600;
			}

			text {
				margin-right: 2rpx;
				font-size: 24rpx;
			}

			.type-tag {
				position: absolute;
				top: 0;
				left: 0;
				width: 65rpx;
				height: 31rpx;
			}
		}

		.group-card {
			position: relative;
			width: 100%;
			height: 100%;
		}

		.flash-border {
			display: var(--sf);
			position: absolute;
			top: -45.5rpx;
			left: -33.5rpx;
			z-index: 20;
			width: 270rpx;
			height: 360rpx;
			overflow: hidden;

			.the-flash {
				flex-shrink: 0;
				position: absolute;
				top: 2rpx;
				left: 0;
				transform: scaleY(0.9);
				width: 4050rpx;
				height: 360rpx;
				// background-color: #000;
				animation: move-flash 0.8s steps(12, end) 0s 2 normal forwards;
			}
		}

		.special-card {
			position: relative;
			width: 100%;
			height: 100%;
			perspective: calc(203rpx * 3.5);

			--m: -720deg;
			--f: -540deg;

			--dtime: 0.3s;

			--opy: 0;
			--sae: 1;
			--shadow: 0;

			--sf: none;

			animation: flop-end 1.5s ease-in 4s 1 normal forwards;

			&>view {
				backface-visibility: hidden;
			}

			.masks {
				position: absolute;
				top: 0;
				left: 0;

				transform: rotateY(var(--m));
				transition: all var(--dtime);

				width: 100%;
				height: 100%;
			}

			.shadows {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 85%;
				height: 100%;
				// background-color: #000;
				opacity: var(--shadow);
				transition: all var(--dtime);
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					position: relative;
					left: -203rpx;
					width: 85%;
					filter: drop-shadow(203rpx 0 1px #fb6497);
				}
			}

			.front.fol {
				z-index: 7;
				transform: rotateY(var(--f)) scale(var(--sae));
				opacity: var(--opy);
			}

			.front {
				position: absolute;
				top: 0;
				left: 0;

				transform: rotateY(var(--f));
				transition: all var(--dtime);

				width: 100%;
				height: 100%;
			}
		}

		.lottery-content-item {
			position: relative;
			z-index: 2;
			width: 100%;
			height: 100%;
			overflow: hidden;

			.lottery-name-item {
				position: absolute;
				bottom: 46rpx;
				left: 50%;
				transform: translateX(-50%);
				z-index: 10;
				width: 70%;
				font-weight: 500;
				text-align: center;
				font-size: 21rpx;
				color: #fff;
			}
		}

		.cover-lottery {
			position: absolute;
			top: 46%;
			left: 50%;
			transform: translate(-50%, -50%) scale(0.86);
			width: 85%;
			opacity: 0;
			animation: fade var(--timing) ease-in 0.2s 1 normal forwards;
		}

		.lottery-bg {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) scale(1.11);
			display: block;
			width: 203rpx;
		}
	}

	.unknown {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-weight: 600;
		font-size: 108rpx;
		color: #fff;

		text-shadow: 0 0 10rpx #defc8b;
	}

	@keyframes flop-end {

		/* 剪影动画 */
		0% {
			--shadow: 0;
		}

		5% {
			--shadow: 1;
		}

		10% {
			--shadow: 1;
		}

		15% {
			--shadow: 0.3;
		}

		20% {
			--shadow: 0.8;
		}

		/* 剪影动画 end*/
		/* 翻牌动画 */
		30% {
			--shadow: 0;
			--m: -720deg;
			--f: -540deg;
		}

		40% {
			--m: -540deg;
			--f: -360deg;
		}

		50% {
			--m: -360deg;
			--f: -180deg;
		}

		55% {
			--m: -180deg;
			--f: 0deg;
			--sf: flex;
		}

		/* 翻牌动画 end*/
		/* 虚影缩放动画 */
		68% {
			--m: -180deg;
			--f: 0deg;
			--opy: 1;
			--sae: 1;
		}

		70% {
			--opy: 0.6;
			--sae: 1.2;
		}

		75% {
			--opy: 0;
			--sae: 1;
		}

		82% {
			--opy: 0.7;
			--sae: 1.3;
		}

		85% {
			--opy: 0.2;
			--sae: 1.1;
		}

		87% {
			--opy: 0.6;
			--sae: 1.2;
		}

		92% {
			--opy: 0.8;
			--sae: 1.05;
		}

		/* 虚影缩放动画 end*/
		95% {
			--opy: 0;
			--sae: 1.5;
		}

		100% {
			--opy: 0;
			--sae: 1;
			--m: -180deg;
			--f: 0deg;
			--shadow: 0;
			--sf: flex;
		}
	}

	@keyframes move-flash {
		0% {
			left: -810rpx;
		}

		100% {
			left: -4050rpx;
		}
	}
	.active{
		background: #a084f0;
	}
	.vssfilter{
		filter: grayscale(100%);
	}
</style>